<template>
  <div ref="articlelist" class="article-list" @scroll="onScroll">
    <!-- 文章列表 \\
    isRefreshing 默认是false, 下拉刷新期间会自动将isRefreshing设置为true,刷新完毕后,需要手动设置为false
    -->
    <van-pull-refresh v-model="isRefreshing" success-text="刷新成功" @refresh="onRefresh">
      <!--loading属性 是控制加载状态的 默认是false 加载中是true, 加载结束后需要设置为false
          finished属性 控制结束状态的 如果数据加载完毕了,数据没有了,需要设置finished为true,
          finished为true后 会显示finished-text
          @load事件  load事件中书写是异步代码
          1. load事件加载页面会默认执行一次
          2. 如果第一次执行load事件返回的数据没有占满整个屏幕,会继续触发load事件
          3. load事件执行期间, 内部会将loading设置为true    自动的
          4. 一次请求结束后需要手动将loading设置为false     手动的
          5. 如果滚动屏幕快触底,会继续触发load事件
    -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="--哼--我也是有底线的"
        @load="onLoad"
      >
        <van-cell
          v-for="item in list"
          :key="item.art_id.toString()"
          :title="item.title"
          @click="$router.push({ name: 'article', params: {id: item.art_id.toString()} })"
        >
          <!-- 跳转路由 使用 query传参  配置对象 { path: '/searchResult', query: { keyword: value }}
            如果使用的是params传参, 路由必须加name属性 使用name的方式跳转
          -->
          <!-- @click="$router.push('/article/'+item.art_id.toString())" -->
          <template #label>
            <!-- 图片区域 -->
            <van-grid :column-num="item.cover.images.length">
              <van-grid-item v-for="(str,index) in item.cover.images" :key="index">
                <van-image :src="str" lazy-load />
              </van-grid-item>
            </van-grid>
            <!-- 三段文本 -->
            <div class="meta">
              <span>{{ item.aut_name }}</span>
              <span>{{ item.comm_count }}评论</span>
              <span>{{ item.pubdate | relativeTime }}</span>
              <!-- 删除的字体图标 通知父组件-->
              <!-- 控制x显示与隐藏 用户token判断的条件 $store.state.user.tokenInfo.token-->
              <van-icon
                v-if="tokenInfo.token"
                name="cross"
                class="close"
                @click.stop="$emit('showPopUp', item.art_id.toString(), channel.id)"
              />
            </div>
          </template>
        </van-cell>
      </van-list>
    </van-pull-refresh>

  </div>
</template>

<script>
import { reqGetArticleList } from '@/api/channels'
import { mapState } from 'vuex'
export default {
  // 组件名称使用首字母大写的方式, 不要出现html标签
  name: 'ArticleList',
  // 接收父组件传递的数据
  props: {
    channel: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      timetamp: null,
      isRefreshing: false,
      top: 0 // 记录文章列表滚出的高度
    }
  },
  // 组件激活的钩子
  activated() {
    console.log('激活了')
    // 将记录的top值设置给articlelist的scrollTop
    this.$refs.articlelist.scrollTop = this.top
  },
  // 组件停用的钩子
  deactivated() {
    console.log('失活了')
  },
  computed: {
    // ...mapState('模块名', ['数据名'])
    ...mapState('user', ['tokenInfo'])
  },
  methods: {
    async onLoad() {
      // console.log('load事件执行了')
      if (!this.timetamp) {
        this.timetamp = +new Date()
      }
      const { data: { data: { results, pre_timestamp }}} = await reqGetArticleList(this.channel.id, this.timetamp)
      // console.log(results) // [{},{},{}]
      // this.list = results 不能做数组的赋值, 而应该追加数组(展开追加)
      // this.list.push(...results)
      this.list = [...this.list, ...results]
      // 将指定的时间戳赋值,以便下一次请求
      this.timetamp = pre_timestamp
      // 请求结束后 手动关闭loading
      this.loading = false

      // finished处理 响应的数据为空 说明没数据了  显示加载结束状态
      if (results.length === 0) {
        this.finished = true
      }
      /*  异步更新数据
      setTimeout 仅做示例，真实场景中一般为 ajax 请求
        setTimeout(() => {
          for (let i = 0; i < 10; i++) {
            this.list.push(this.list.length + 1)
          }
          // 加载状态结束
          this.loading = false
          // 数据全部加载完成
          if (this.list.length >= 60) {
            this.finished = true
          }
        }, 1000) */
    },
    // 刷新触发的事件
    async onRefresh() {
      // 1. 发送请求 携带最新的时间戳就可以
      const { data: { data: { results, pre_timestamp }}} = await reqGetArticleList(this.channel.id, +new Date())
      // console.log(results)
      // console.log(pre_timestamp)
      // 将刷新回来的数据直接赋值给数组即可
      this.list = results
      // 将刷新后的时间戳赋值
      this.timetamp = pre_timestamp
      // 手动关闭 isRefreshing
      this.isRefreshing = false
    },
    // 删除数据的方法
    filterList(id) {
      console.log('删除不感兴趣的文章')
      // 数组过滤 将不感兴趣的文章移除
      this.list = this.list.filter(item => item.art_id.toString() !== id)
    },
    // 记录文章列表滚动事件 --- 单独将home中的pane的overflow:auto移除，为文章列表加height:100%overflow:auto
    onScroll() {
      // console.log(this.$refs.articlelist.scrollTop)
      // 存储在data中
      this.top = this.$refs.articlelist.scrollTop
    }
  }
}
</script>

<style lang="scss" scoped>
.article-list {
  height: 100%;
  overflow: auto;
  .meta {
    span {
      margin-right: 10px;
    }
  }
  .close{
    position: absolute;
    right: 24px;
  }
}
</style>
